<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>#{bundle.JugandoA}</title>
        <h:outputStylesheet name="css/jsfcrud.css"/>
        
        <script type="text/javascript">
        var wsocket;    // Websocket connection
        var numEsc;   // User's name
        var n;
        var panel;   // Chat area
        var posX;
        var posY;
        /* Connect to the Websocket endpoint
        * Set a callback for incoming messages */
        function connect() {
            n=0;
            numEsc=0;
            panel = document.getElementById("panelDeImagen");
            wsocket = new WebSocket("ws://localhost:8080/PruebaBBDD14/websocketjuego");
            wsocket.onmessage = onMessage;
            wsocket.onerror = onError;
        }
        /* Callback function for incoming messages
        * evt.data contains the message
        * Update the chat area, user's area and Websocket console */
        function onMessage(evt) {
            n=n+1;
            /* Parse the message into a JavaScript object */
            var msg = JSON.parse(evt.data);
            numEsc=msg.escenario;
            var imagen="data:image/png;base64,"+numEsc;
            panel.setAttribute("src", imagen);
        }
        
        function onError(evt) {
            Alert("oho!.. error:" + evt.data);
        };
        
        /* Send a join message to the server */
        function send() {
            var jsonstr;
            /* Create a message as a JavaScript object */
            var msg = {};
            msg.escenario = n;
            if(n == 0){
                msg.posx = document.getElementById("idDelJuego").innerHTML;
            }else{
                msg.posx = posX;
            }
            msg.posy = posY;
            /* Convert the message to JSON */
            jsonstr = JSON.stringify(msg);
            /* Send the JSON text */
            wsocket.send(jsonstr);
        }
        
        function coords(event)
        {
            var rect= panel.getBoundingClientRect();
            var x=(event.clientX - rect.left);
            var y=(event.clientY - rect.top);
            
            var ancho=panel.clientWidth;
            var alto= panel.clientHeight;
            posX=Math.floor((x*1000)/ancho);
            posY=Math.floor((y*1000)/alto);
            send();
        }

        /* Call connect() when the page first loads */
        window.addEventListener("load", connect, false);
        </script>
        
    </h:head>
    <f:metadata>
        <f:viewParam name="Id" value="#{juegoSeleccionado.id}" />
    </f:metadata>
    <h:body>
        <div class="cabecera">
            <div class="logo">
                <h:link outcome="/index" >
                    <img border="0" src="#{resource['img/logo.png']}" width="35%" height="35%" />
                </h:link>
            </div>
            <div class="usuario">
                <h:form>
                <h:panelGrid columns="1" rendered="#{login.loggedIn}">
                    <h:form rendered="#{login.loggedInUser}">
                        <h:outputLabel for="username">Hola: #{login.usuario.nombreUsuario}</h:outputLabel>
                    </h:form>
                    
                    <h:form rendered="#{login.loggedInAdmin}">
                        <h:outputLabel for="admin">Hola: #{login.admin.nombreAdmin}</h:outputLabel>
                    </h:form>

                </h:panelGrid>
                <h:panelGrid columns="2" rendered="#{!login.loggedIn}">

                    <h:outputLabel for="username">Username:</h:outputLabel>

                    <h:inputText id="username" value="#{credenciales.username}"/>

                    <h:outputLabel for="password">Password:</h:outputLabel>

                    <h:inputSecret id="password" value="#{credenciales.password}"/>

                </h:panelGrid>

                <h:panelGrid columns="2">
                <h:commandButton value="Login" action="#{login.doLogin}" rendered="#{!login.loggedIn}"/>
                
                <h:commandButton value="Registrate" action="#{usuariosMainController.prepareCreate}" rendered="#{!login.loggedIn}"/>

                <h:commandButton value="Logout" action="#{login.logout}" rendered="#{login.loggedIn}"/>
                                
                <h:commandButton value="Perfil" action="#{usuariosMainController.prepareView()}" rendered="#{login.loggedInUser}"/>
                    
                <h:commandButton value="Panel Admin" action="/administrador/PanelAdmin" rendered="#{login.loggedInAdmin}"/>
                
                </h:panelGrid>

            </h:form>
            </div>
        </div>
        
        <div class="contenedor">
            <div class="cuerpo">
                <p class="oculto" id="idDelJuego">#{juegoSeleccionado.id}</p>
                <br />
                <br />
                <img id="panelDeImagen" onmousedown="coords(event);" border="0" src="#{resource['img/0-es.png']}" width="70%" />
                <br />                
                <br />
                <h:form rendered="#{login.loggedInUser}">
                    <h:panelGroup id="messagePanel" layout="block">
                        <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
                    </h:panelGroup>
                    <h:panelGrid columns="2">
                        <h:outputLabel value="#{bundle.CreateValoracionesLabel_valoracion}" for="valoracion" />
                        <h:selectOneMenu id="rating" value="#{juegosController.selectedValoracion.valoracion}" title="#{bundle.CreateValoracionesTitle_valoracion}" required="true" requiredMessage="#{bundle.CreateValoracionesRequiredMessage_valoracion}">
                            <f:selectItems value="#{juegosController.valoracionesScore}" />
                        </h:selectOneMenu>
                        <h:outputLabel value="#{bundle.CreateValoracionesLabel_comentario}" for="comentario" />
                        <h:inputText id="comentario" value="#{juegosController.selectedValoracion.comentario}" title="#{bundle.CreateValoracionesTitle_comentario}" />
                    </h:panelGrid>
                    <br />
                    <h:commandLink action="#{juegosController.createValoracion}" value="#{bundle.CreateValoracionesSaveLink}" />
                    <br />
                </h:form>
                <br />                
                <br />
                <h:form>
                    <h:outputText escape="false" value="#{bundle.ListValoracionesEmpty}" rendered="#{juegosController.itemsVal.rowCount == 0}"/>
                    <h:panelGroup rendered="#{juegosController.itemsVal.rowCount > 0}">
                        <h:outputText value="#{juegosController.paginationVal.pageFirstItem + 1}..#{juegosController.paginationVal.pageLastItem + 1}/#{juegosController.paginationVal.itemsCount}"/>&nbsp;
                        <h:commandLink action="#{juegosController.previousVal}" value="#{bundle.Previous} #{juegosController.paginationVal.pageSize}" rendered="#{juegosController.paginationVal.hasPreviousPage}"/>&nbsp;
                        <h:commandLink action="#{juegosController.next}" value="#{bundle.Next} #{juegosController.paginationVal.pageSize}" rendered="#{juegosController.paginationVal.hasNextPage}"/>&nbsp;
                        <h:dataTable value="#{juegosController.itemsVal}" var="item" border="0" cellpadding="2" cellspacing="0" rowClasses="jsfcrud_odd_row,jsfcrud_even_row" rules="all" style="border:solid 1px">
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText value="#{bundle.ListValoracionesTitle_valoracion}"/>
                                </f:facet>
                                <h:outputText value="#{item.valoracion}"/>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText value="#{bundle.ListValoracionesTitle_comentario}"/>
                                </f:facet>
                                <h:outputText value="#{item.comentario}"/>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText value="#{bundle.ListValoracionesTitle_usuarios}"/>
                                </f:facet>
                                <h:outputText value="#{item.usuarios}"/>
                            </h:column>
                            <h:column  rendered="#{login.loggedInAdmin}">
                                <f:facet name="header">
                                    <h:outputText value="&nbsp;"/>
                                </f:facet>
                                <h:outputText value=" "/>
                                <h:commandLink action="#{valoracionesController.destroy}" value="#{bundle.ListValoracionesDestroyLink}"/>
                            </h:column>
                        </h:dataTable>
                    </h:panelGroup>
                </h:form>                
                
            </div>
        </div>
    </h:body>


</html>